<template>
	<view style="background:#f2f5fa;overflow: hidden;">
	
		<view class="biaodan-info">
			<view class="forms-item-title">
				<u--text :text="matchInput.formName" margin="20rpx 0 10rpx 5rpx"/>
				<!-- payType: "normal" -->
				<u-tag :text="matchInput.formType=='normal_from'?'普通报名':
				matchInput.formType=='member_form'?'会员报名':
				matchInput.formType=='team_form'?'团队报名':''" :type="
				matchInput.formType=='normal_from'?'primary':
				matchInput.formType=='member_form'?'error':
				matchInput.formType=='team_form'?'warning':''
				" plain plainFill  size="mini"/>
				
			</view> 
		</view>
		<view class="biaodan-info">
				<u--form labelPosition="left" :model="model" :rules="rules" ref="uForm" labelWidth="70">
					<u-form-item :required="rules[item.fieldEnName][0].required" :label="item.fieldName" :prop="item.fieldEnName" v-for="(item,index) in matchInput.formFields" :key="index">
						
						<!-- 输入框 -->
						<u--input v-model="model[item.fieldEnName]" v-if="item.fieldType=='Input'"/>
						<!-- 文本域 -->
						<u--textarea :count="true" maxlength="200" v-model="model[item.fieldEnName]" v-if="item.fieldType=='textarea'"/>
						<!-- 单选 -->
						<u-radio-group  v-model="model[item.fieldEnName]"  v-if="item.fieldType=='Radio'">
							<u-radio :customStyle="{marginRight: '8px'}"
							  v-for="(item1, index1) in radiolist" :key="index1"
							  :label="item1.data"
							  :name="item1.id" 
							  
							  />
						</u-radio-group>
						<!-- 多选 -->
						 <u-checkbox-group v-model="model[item.fieldEnName]"  v-if="item.fieldType=='Checkbox'">
						   <u-checkbox
							   :customStyle="{marginRight: '8px'}"
							   v-for="(item2, index2) in checkboxList"
							   :key="index2"
							   :label="item2.data"
							   :name="item2.id"
						   />
						</u-checkbox-group>
						<!-- 日期选择 -->
						
						<input   @click="riqiFocus" disabled 
						 v-model="model[item.fieldEnName]" v-if="item.fieldType=='DatePicker'"
						 style="border-bottom: 1px solid #ccc;"
						 />
						
						 <!-- 时间选择 -->
						 <input @click="timePickerShow=true"  disabled 
						  v-model="model[item.fieldEnName]" v-if="item.fieldType=='TimePicker'"
						  style="border-bottom: 1px solid #ccc;"
						  />
						  <!-- 图片或视频上传 -->
						  
						
							
						  <u-upload ref="upLoad" v-if="item.fieldType=='upload_view'||item.fieldType=='upload'"
								:accept="JSON.parse(item.initialData).dataArr[0].data=='img'?'image':JSON.parse(item.initialData).dataArr[0].data=='video'?'video':'file'"
						  		:fileList="FileObj[`${item.fieldEnName}`]"
						  		@afterRead="afterRead"
								useBeforeRead 
								@oversize="oversize"
						  		@delete="deletePic"
						  		:name="item.fieldEnName"
						  		multiple
						  		:maxCount="3"
								:maxSize="item.size*1024*1024"
						  	>
							
							</u-upload>
						
					</u-form-item>
					
				</u--form>
				<u-button type="primary" text="确定" @click="submit"></u-button>
		</view>
		
		<!-- 日期弹框 -->
		<u-datetime-picker :close="datePickClose" @cancel="datePickClose" :show="datePickerShow" v-model="value1" mode="date" @confirm="datePickSub"/>
		<!-- 时间选择 -->
		<u-datetime-picker :close="timePickClose"  @cancel="timePickClose" :show="timePickerShow" v-model="value2" mode="time" @confirm="timePickSub"/>
		<view>
			
			
		</view>
	</view>
</template>

<script>
	import {mapActions} from 'vuex'
import upload from '../../uni_modules/uview-ui/libs/config/props/upload';
	export default {
		data() {
			return {
				FileObj:[],
				
				imgMaxSize:0,
				matchId:0,//saishi0, 
				formId:0,
				
				matchInput:{},
				model:{},
				rules:{},
				radiolist:[],//单选数据
				checkboxList:[],//多选
				datePickerShow:false,//日期弹框
				value1: Number(new Date()),//日期值
				timePickerShow:false,//时间弹框
				value2:'',//日期值
			};
		},
	
		onLoad(params) {
			this.matchId=params.matchId
			this.formId=params.formId
			this.getSaishiFieldAction({formId:this.formId,success:res=>{
				this.matchInput={...res.data.data}
				this.matchInput.formFields.forEach((it,index)=>{

					
					/**
					 * 数据
					*/
	
					//单选
					if(it.fieldType=='Radio'){
						this.radiolist=JSON.parse(it.initialData).dataArr
						this.model[it.fieldEnName]=this.radiolist[0].id
					}
					//多选
					if(it.fieldType=='Checkbox'){
						let arr=[]
						this.checkboxList=JSON.parse(it.initialData).dataArr
						arr.push(this.checkboxList[0].id)
						this.model[it.fieldEnName]=arr
					}
					//上传视频或图片
					if(it.fieldType=='upload_view'||it.fieldType=='upload'){
						
					
						this.FileObj[it.name]=[]
						console.log(this.FileObj[it.name])
						it.size=JSON.parse(it.restrictJson).formatter.size?JSON.parse(it.restrictJson).formatter.size:Number.MAX_VALUE
					}
					
				})       
			}})
		},
		onReady() {
				//onReady 为uni-app支持的生命周期之一
		    	this.$refs.uForm.setRules(this.rules)
		},
		methods:{
			...mapActions('m_saishi',['getSaishiIngInputAction','getSaishiSubmitAction','getSaishiFieldAction']),
			//关闭日期弹窗
			datePickClose(){
				this.datePickerShow=false;
			},
			//关闭时间弹窗
			timePickClose(){
				this.timePickerShow=false;
			},
			//点击日期弹窗确定
			datePickSub(e){
				this.matchInput.formFields.forEach(item=>{
					if(item.fieldType=='DatePicker'){
						this.model[item.fieldEnName]=uni.$u.timeFormat(e.value, 'yyyy年mm月dd日')
					}
				})
				this.datePickClose()
			},
			//点击时间弹窗确定
			timePickSub(e){
				this.matchInput.formFields.forEach(item=>{
					if(item.fieldType=='TimePicker'){
						this.model[item.fieldEnName]=e.value
					}
				})
				this.timePickClose()
			},
			//路由跳转
			goPage(url,obj){
				if(this.$store.state.m_login.token.length==0) return  uni.$u.toast('请您先登录')
				uni.$u.route(url,obj);
			},
			
			// 删除图片
			deletePic(event) {
				this.FileObj[event.name].splice(event.index, 1)
			},
			//图片上传afterRead
			async afterRead(event){
				
				console.log(event)
				//本地上传的图片文件
				let lists = [].concat(event.file)
			
				//存放到服务器的容器长度
				let fileListLen = this.FileObj[event.name].length
					console.log(fileListLen)
				//将本地文件信息传到容器中
				lists.map((item) => {
					this.FileObj[event.name].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFile(lists[i].url)
					let item = this.FileObj[event.name][fileListLen]
					
					this.FileObj[event.name].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url:result.data.fileName
					}))
					fileListLen++
				}	
						console.log(this.FileObj,event.name)
			},
			
			
			uploadFile(data){
				return uni.$u.http.upload('/common/uploadCTOss',{filePath:data,name:'file' ,custom: {auth: true}})
			},
		
			
			
			
			
			submit(){
				console.log(this.model)
			/* 	this.getSaishiSubmitAction({data:{
					
					"applyJson":JSON.stringify(this.model),
					"formId": this.matchInput.formId,
					"matchId": this.matchInput.matchId,
					"phone": this.model['手机号'],
					"trueName": this.model['真实姓名']
				},success:res=>{
					if(res.data.code==200){
						uni.$u.toast('报名成功')
						this.goPage('/subpkg/saishiContent/saishiContent',{matchId:this.matchId})
					}
				}}) */
			}
		}
	}
</script>

<style lang="scss">
	.biaodan-info{padding:20rpx;background: #fff;margin: 20rpx;}
	.forms-item-title{display: flex;justify-content: space-between;align-items: flex-end;}
	
</style>
